<template>
  <div class="goods_list">
    <Scroll class="content">
      <van-swipe-cell v-for="(item, index) in cartList" :key="index">
        <div class="goods_list_item">
          <span class="unselected" :class="{ 'selected': item.selectedState }" @click="changeOption(index)">
            <van-icon name="success" :color="item.selectedState ? '#fff' : '#666'" />
          </span>
          <div class="goods_img"><img :src="item.imgUrl" alt=""></div>
          <div class="goods_title">
            <div>{{ item.title }}</div>
            <div>
              <span>￥</span>
              <span>{{ item.price }}</span>
            </div>
          </div>
          <div class="goods_count">
            <span @click="decrementCount(index)">-</span>
            <span>{{ item.count }}</span>
            <span @click="incrementCount(index)">+</span>
          </div>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="deleteGoods(index)" />
        </template>
      </van-swipe-cell>
    </Scroll>
    <van-submit-bar :price="totalPrice * 100" button-text="提交订单" @submit="onSubmit">
      <template #default>
        <span class="selected">已选({{ selectedCount }})</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapState, mapMutations, mapGetters } from 'vuex'
import Scroll from '@/components/common/Scroll.vue'
import { getSubmitRequest } from '@/network/api/pay'
export default {
  name: 'cartlist',
  components: {
    Scroll
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['totalPrice', 'selectedCount'])
  },
  methods: {
    ...mapMutations('cart', ['CHANGE_OPTION']),
    ...mapMutations('order', ['GET_ORDERID']),
    changeOption(index) {
      this.CHANGE_OPTION(index)
    },
    // 增加商品数量count
    incrementCount(index) {
      this.$store.dispatch('cart/UPDATE_CART_COUNT', {
        userId: this.$store.state.user.userId,
        goodsId: this.$store.state.cart.cartList[index].goodsId,
        newCount: ++this.$store.state.cart.cartList[index].count
      })
    },
    // 减少商品数量count
    decrementCount(index) {
      if (this.$store.state.cart.cartList[index].count === 1) return
      this.$store.dispatch('cart/UPDATE_CART_COUNT', {
        userId: this.$store.state.user.userId,
        goodsId: this.$store.state.cart.cartList[index].goodsId,
        newCount: --this.$store.state.cart.cartList[index].count
      })
    },
    // 删除某个商品
    deleteGoods(index) {
      this.$store.dispatch('cart/DELETE_GOODS', {
        id: this.cartList[index].id,
        index: index
      })
      Toast.success('删除成功')
    },
    // 提交订单
    async onSubmit() {
      if (!this.selectedCount) return Toast('未选择任何商品')
      // 把商品信息存到vuex
      const goodsIds = []
      const titles = []
      const prices = []
      const counts = []
      const imgUrls = []
      this.cartList.filter(item => item.selectedState).forEach(item => {
        goodsIds.push(item.goodsId)
        titles.push(item.title)
        prices.push(item.price)
        counts.push(item.count)
        imgUrls.push(item.imgUrl)
        console.log(item.imgUrl);
      })
      const res = await getSubmitRequest(
        {
          goodsIds: goodsIds.toString(),
          totalPrice: this.totalPrice,
          titles: titles.toString(),
          userId: this.$store.state.user.userId,
          prices: prices.toString(),
          counts: counts.toString(),
          imgUrls: imgUrls.join('*')
        })
      this.GET_ORDERID(res.orderId)
      // 进入提交订单页面
      this.$router.push('/order')
    }
  }
}
</script>

<style scoped lang="less">
.content {
  position: absolute;
  top: 145px;
  left: 0;
  right: 0;
  bottom: 100px;
  overflow: hidden;
}

.goods_list {
  .van-submit-bar {
    bottom: 50px;

    .selected {
      font-size: 16px;
      color: #b0352f;
      background-color: #fff;
      margin-left: 10px;
    }
  }

  .goods_list_item {
    display: flex;
    align-items: center;
    width: 100%;
    height: 96px;
    padding: 5px;
    background-color: #fff;
    border-bottom: 1px solid #eee;

    .goods_title {
      width: 200px;
      height: 100%;
      font-size: 12px;
      margin-top: 25px;
      margin-left: 10px;

      div:nth-child(2) {
        margin-top: 25px;
        font-size: 16px;
        color: #b0352f;
      }
    }

    .goods_count {
      display: flex;
      position: absolute;
      justify-content: space-around;
      right: 5px;
      margin-right: 15px;
      margin-top: 15px;

      span {
        width: 26px;
        height: 26px;
        line-height: 26px;
        text-align: center;
      }

      span:nth-child(2) {
        border-bottom: 1px solid #dcdcdc;
        border-top: 1px solid #dcdcdc;
      }

      span:nth-child(1),
      span:nth-child(3) {
        border: 1px solid #dcdcdc;
      }
    }

    .goods_img {
      width: 75px;
      height: 75px;
      border: 1px solid #eee;

      img {
        width: 100%;
      }
    }
  }

  .delete-button {
    height: 100%;
  }
}

.unselected {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  margin: 0 12px 0 8px;
  border-radius: 50%;
  border: 1px solid #666;
}

.selected {
  background-color: #b0352f;
}
</style>

